<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    
<%@ page import="java.util.List"%>
<%@ page import="sg.edu.nus.iss.phoenix.schedule.entity.WeeklySchedule" %>
<%@ page import="sg.edu.nus.iss.phoenix.schedule.entity.ProgramSlot" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
String startDateValue = "Monday";
String endDateValue = "Monday";
String startTimeMinValue ="00";
String startHourValue="1";
String endTimeMinValue="00";
String endHourValue="1";
String startTime = "00:00";
String endTime = "00:00";
%>
<html>
<head>
<link href="<c:url value='/css/main.css'/>" rel="stylesheet" type="text/css"/>
<fmt:setBundle basename="ApplicationResources" />
<title> <fmt:message key="title.setuprp"/> </title>
</head>
<body>
<form name="ScheduledPForm">
        <h1><fmt:message key="label.schedulep"/></h1>
        <c:url var="url" scope="page" value="/pages/setuprp.jsp">
        		<c:param name="name" value=""/>
                <c:param name="description" value=""/>
                <c:param name="duration" value=""/>
                <c:param name="insert" value="true"/>
        </c:url>
        <a href="${url}"><fmt:message key="label.schedulep.add"/></a>
        <br/><br/>
        <fmt:message key="label.schedulep.week" />
        <select name="week">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			</select>
		<%
		String st=request.getParameter("week");
		if(st!=null){
		    out.println("You have selected: "+st);
		}
		%>
        <fmt:message key="label.schedulep.year" />
        
			<select name="Year">
			<option value="2012">2012</option>
			<option value="2013">2013</option>
			<option value="2014">2014</option>
			<option value="2015">2015</option>
			</select>
			<br>
	  	
	  	
			<table border="0">
			<tr>
				<td>
					<fmt:message key="label.schedulep.EnterStartDate" />
        			<select name="startDate" id="startDate" onchange="getSelectedValueStartDate();">
						<option value="Monday">Monday</option>
						<option value="Tuesday">Tuesday</option>
						<option value="Wednesday">Wednesday</option>
						<option value="Thursday">Thursday</option>
						<option value="Friday">Friday</option>
						<option value="Saturday">Saturday</option>
						<option value="Sunday">Sunday</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<fmt:message key="label.schedulep.StartTime.Hour" />
        			<select name="startHour" id="startHour" onchange="getSelectedValuestartHour();">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</td>
				<td>
					<fmt:message key="label.schedulep.StartTime.Min" />
        			<select name="startTimeMin" id="startTimeMin" onchange="getSelectedValueStartMin()";>
						<option value="00">00</option>
						<option value="15">15</option>
						<option value="30">30</option>
						<option value="45">45</option>
					</select>
				</td>
			</tr>
			
			<tr>
				<td>
					<fmt:message key="label.schedulep.EnterEndDate" />
        			<select name="endDate" id="endDate" onchange="getSelectedValueEndDate();">
						<option value="Monday">Monday</option>
						<option value="Tuesday">Tuesday</option>
						<option value="Wednesday">Wednesday</option>
						<option value="Thursday">Thursday</option>
						<option value="Friday">Friday</option>
						<option value="Saturday">Saturday</option>
						<option value="Sunday">Sunday</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<fmt:message key="label.schedulep.EndTime.Hour" />
        			<select name="endHour" id="endHour" onchange="getSelectedValueEndHour();">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</td>
				<td>
					<fmt:message key="label.schedulep.EndTime.Min" />
        			<select name="endTimeMin" id="endTimeMin" onchange="getSelectedValueEndMin();">  
					    <option value="00">00</option>  
					    <option value="15">15</option>
					    <option value="30">30</option>  
					    <option value="45">45</option>  
					</select>
					
					<script type="text/javascript">  
						function getSelectedValueStartDate(){
							startDateValue = document.getElementById('startDate').value;  
							//alert("value="+document.getElementById('startDate').value);  
						}
						function getSelectedValueEndDate(){
							endDateValue = document.getElementById('endDate').value;  
						    //alert("value="+document.getElementById('endDate').value);  
						}
						function getSelectedValueStartMin() {  
							startTimeMinValue = document.getElementById('startTimeMin').value;  
						    //alert("value="+document.getElementById('startTimeMin').value);  
						    //alert("text="+document.getElementById('startTimeMin').options[index].text);  
						}  
						
						function getSelectedValuestartHour(){
							startHourValue = document.getElementById('startHour').value;  
						   // alert("value="+document.getElementById('startHour').value);  
						}
						function getSelectedValueEndMin() {  
						    endTimeMinValue = document.getElementById('endTimeMin').value;  
						    //alert("value="+document.getElementById('endTimeMin').value);  
						    //alert("text="+document.getElementById('endTimeMin').options[index].text);  
						}  
						
						function getSelectedValueEndHour(){
							endHourValue = document.getElementById('endHour').value;  
						    //alert("value="+document.getElementById('endHour').value);  
						}
						
						function addRows(){
						  var TABLE = document.getElementById('tableId');
						  var BODY = TABLE.getElementsByTagName('tbody')[0];
						  
						  var TR = document.createElement('tr');
						  var TD = document.createElement('td');
						  TD.innerHTML = startDateValue;
						  TR.appendChild (TD);
						  
						  TD = document.createElement('td');
						  TD.innerHTML = endDateValue;
						  TR.appendChild (TD);
						  
						  BODY.appendChild(TR);
						}
						// append row to the HTML table
						function appendRow() {
						    var tbl = document.getElementById('tableId'), // table reference
						        row = tbl.insertRow(tbl.rows.length),      // append table row
						        i;
						    // insert table cells to the new row
						    
						    for (i = 0; i < tbl.rows[0].cells.length; i++) {
						    	if(i==0){
						    		createCell(row.insertCell(i), startDateValue, 'row');
						    	}else if(i==1){
						    		startTime = startHourValue+":"+startTimeMinValue;
						    		createCell(row.insertCell(i), startTime, 'row');
						    	}
						    	else if(i==2){
						    		createCell(row.insertCell(i), endDateValue, 'row');
						    	}
						    	else if(i==3){
						    		endTime = endHourValue+":"+ endTimeMinValue;
						    		createCell(row.insertCell(i), endTime, 'row');
						    	}else if(i==4){
						    		createCell(row.insertCell(i), document.getElementById('radioProgrammer').value, 'row');
						    	}else if(i==5){
						    		createCell(row.insertCell(i), document.getElementById('radioPresenter').value, 'row');
						    	}
								else if(i==6){
									createCell(row.insertCell(i), document.getElementById('radioPrducer').value, 'row');
						    	}
						    	else{
						    		//Delete Button
						    		//createCell(row.insertCell(i), test, 'row');
						    	}
						    }
						}
						
						// create DIV element and append to the table cell
						function createCell(cell, text, style) {
						    var div = document.createElement('div'), // create DIV element
						        txt = document.createTextNode(text); // create text node
						     
						    div.appendChild(txt);                    // append text node to the DIV
						    div.setAttribute('class', style);        // set DIV class attribute
						    div.setAttribute('className', style);    // set DIV class attribute for IE (?!)
						    cell.appendChild(div);                   // append DIV to the table cell
						}
						
						// append column to the HTML table
						function appendColumn() {
						    var tbl = document.getElementById('my_table'), // table reference
						        i;
						    // open loop for each row and append cell
						    for (i = 0; i < tbl.rows.length; i++) {
						        createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
						    }
						}
						
						// delete table rows with index greater then 0
						function deleteRows() {
						    var tbl = document.getElementById('my_table'), // table reference
						        lastRow = tbl.rows.length - 1,             // set the last row index
						        i;
						    // delete rows with index greater then 0
						    for (i = lastRow; i > 0; i--) {
						        tbl.deleteRow(i);
						    }
						}
						
						// delete table columns with index greater then 0
						function deleteColumns() {
						    var tbl = document.getElementById('my_table'), // table reference
						        lastCol = tbl.rows[0].cells.length - 1,    // set the last column index
						        i, j;
						    // delete cells with index greater then 0 (for each row)
						    for (i = 0; i < tbl.rows.length; i++) {
						        for (j = lastCol; j > 0; j--) {
						            tbl.rows[i].deleteCell(j);
						        }
						    }
						}
						function submitForm(){
							
							htmlForm = document.ScheduledPForm;
							htmlForm.action=action="${pageContext.request.contextPath}/userregister/Registration "
							htmlForm.method="post";
							if(validateForm(htmlForm)){
								htmlForm.submit();
							}
						}
						
				</script>  
				</td>
			</tr>
			<tr>
			<td><align="right">Enter Radio Programmer</td>
				<td><input type =text name="radioProgrammer" id="radioProgrammer" size=25 ></td>
			</tr>
			<tr>
			<td><align="right">Enter Radio Presenter:</td>
			<td><input type =text name="radioPresenter" id="radioPresenter" size=25></td>
			</tr>
			<tr>
			<td><align="right">Enter Radio Producer Presenter:</td>
			<td><input type =text name="radioPrducer" id="radioPrducer" size=25></td>
			</tr>
			</table>
			<br>
			<input type="button" value="Add" onClick="appendRow();">
			<input type="reset" value="Clear Fields">
			
        <table id="tableId" border="1" cellpadding="0" 
                       cellspacing="0" width="50%">
        	<tr>
                <th><fmt:message key="label.schedulep.StartDate"/></th>
                <th><fmt:message key="label.schedulep.StartTime"/></th>
                <th><fmt:message key="label.schedulep.EndDate"/></th>
                <th><fmt:message key="label.schedulep.EndTime"/></th>
                <th><fmt:message key="label.schedulep.radioProgram"/></th>
                <th><fmt:message key="label.schedulep.presenter"/> </th>
                <th><fmt:message key="label.schedulep.producer"/> </th>
              <!--   <th><fmt:message key="label.schedulep.DeleteButton"></fmt:message></th> -->
            </tr>
            
       	</table>
       	
       	<input type="button" value="Save" onClick="submitForm();">
</form>   
</body>

</html>